<template>
  <div class='left-menu'>
    <el-menu
      :default-active="menuActive"
      router
      class="el-menu-vertical-demo"
      background-color="#24303c"
      text-color="#FFFFFF"
      active-text-color="#67C23A">
      <el-menu-item index="home">
        <i class="el-icon-s-home"></i>
        <span slot="title">主页</span>
      </el-menu-item>
      <el-menu-item index="userlist">
        <i class="el-icon-s-grid"></i>
        <span slot="title">项目列表</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>

export default {
  data () {
    return {
      menuActive: ''
    }
  },
  created () {
    this.menuActiveData()
  },
  methods: {
    menuActiveData () { // 用于在子菜单高亮显示时，是为了配合监听路由改变高亮时，刷新页面时无法高亮显示的问题
      let activePath = this.$route.path
      this.menuActive = activePath.replace('/', '') // 将去除 ’/‘后的路由地址字符串赋值给menuActive ，用于当前菜单栏的高亮显示
      console.log(1)
    }
  },
  watch: {
    '$route.path' (newUrl, oldUrl) { // 监听路由变化
      this.menuActive = newUrl.replace('/', '') // 如果路由变化了，就将去除 ’/‘后的路由地址字符串赋值给menuActive ，用于当前菜单栏的高亮显示
    }
  }
}
</script>

<style scoped>
 .left-menu {
   width: 100%;
   height: 100%;
 }
 .el-menu {
   border: none;
 }
 .el-menu-item {
   color: #ffffff;
   font-weight: 600;
 }
 .el-submenu {
   color: #ffffff;
   font-weight: 600;
 }
 .is-active {
   box-sizing: border-box;
   background-color: rgb(29, 38, 48) !important;
 }
</style>
